<template>
    <div class="title">民族信息</div>
    <div class="nav">
        <el-button type="success" round @click="onAddItem">新增</el-button>
        <el-button type="info" round @click="refreshData">刷新</el-button>
    </div>
    <div>
        <el-table :data="formData.tableData" style="width: 100%">
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column prop="nation_code" label="民族编号" />
            <el-table-column prop="nation" label="民族" />

            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="success" size="small" :icon="Edit" circle @click="eidtItem(scope.row)" />
                    <el-button type="danger" size="small" :icon="Delete" circle @click="deleteRow(scope.row)" />
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 增加、修改对话框 -->
    <el-dialog v-model="formData.dialogView" title="民族信息" width="500" center>
        <span>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="formData.nationDialog" label-width="auto"
                status-icon>
                <el-form-item label="民族编号">
                    <el-input v-model="formData.nationDialog.nation_code" />
                </el-form-item>
                <el-form-item label="民族">
                    <el-input v-model="formData.nationDialog.nation" />
                </el-form-item>
            </el-form>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelClass">取消</el-button>
                <el-button type="primary" @click="addItem" v-if="formData.showButton">
                    增加
                </el-button>
                <el-button type="primary" @click="altItem" v-if="!formData.showButton">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import {
    Delete,
    Edit,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import baseAPI from '../../utils/api';
import settingData from '@/setting/settingData';

const formData = reactive({
    tableData: [{
        nation: '',
        nation_code: ''
    }],
    dialogView: false,
    showButton: true,
    nationDialog: {
        id: '',
        nation: '',
        nation_code: ''
    },
    nationTem: {
        id: '',
        nation: '',
        nation_code: ''
    }
})
// 删除
const deleteRow = async (row: any) => {
    await baseAPI.natinsAPI.del(row.id)
    ElMessage.error('数据删除成功！')
    getAllData()
}
// 添加
const onAddItem = () => {
    formData.nationDialog = formData.nationTem
    formData.showButton = true
    formData.dialogView = true
}
const addItem = async () => {
    await baseAPI.classAPI.add(formData.nationDialog)
    formData.dialogView = false
    getAllData()
    ElMessage({
        message: '数据增加成功！',
        type: 'success'
    })
}
// 修改
const eidtItem = (row: any) => {
    formData.nationDialog = row
    formData.showButton = false
    formData.dialogView = true
}
const altItem = async () => {
    await baseAPI.classAPI.alt(formData.nationTem.id, formData.nationDialog)
    formData.dialogView = false
    getAllData()
    ElMessage({
        message: '数据修改成功！',
        type: 'success'
    })
}
// 刷新
const refreshData = () => {
    getAllData()
    const nations = formData.tableData.map((res: any) => res.nation)
    settingData.nations.forEach(async (res: any) => {
        if (formData.tableData.length == 0) {
            await baseAPI.natinsAPI.add({ 'nation': res.nation, 'nation_code': res.nation_code })
        } else {
            // console.log(res, class_bjs, class_bjs.includes(res))
            if (!nations.includes(res)) {
                await baseAPI.natinsAPI.add({ 'nation': res.nation, 'nation_code': res.nation_code })
            }
        }
    })
    ElMessage({
        message: '数据刷新成功！',
        type: 'success'
    })
    getAllData()
}
// 取消
const cancelClass = () => {
    formData.nationDialog = formData.nationTem
    formData.dialogView = false
}
// 加载数据
const getAllData = async () => {
    const data = await baseAPI.natinsAPI.getAll()
    formData.tableData = data.data
    ElMessage({
        message: '数据加载成功！',
        type: 'success'
    })
}
getAllData()
</script>

<style scoped>
.title {
    background-color: #fff;
    height: 40px;
    text-align: center;
    font-size: 25px;
    border: #1e1e1e;
}

.nav {
    margin: 10px 0;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
}
</style>